<script setup>
	import {
		ref,
		onActivated,
		toRefs,
		reactive,
	} from 'vue'

	
	// 把菠萝引过来 把数据拿出来
	
	import {
		showConfirmDialog
	} from 'vant';
	import {
		useUserStore
	} from '@/stores/user'
	

	let {userInfo,isLogin,logout} = toRefs(useUserStore()) ;// 这     userInfo.nickname 
	

	import {
		useRouter,
		onBeforeRouteLeave
	} from 'vue-router';
	const router = useRouter()
	// onBeforeRouteLeave(async (to, from, next) => {
	// 	// to,from,next
	// 	// 去哪个页面 当前页面   下一步的动作
	// 	try {
	// 		let res = await showConfirmDialog({
	// 			title: '标题',
	// 			message: '您确认要离开吗',
	// 		})
	// 		next()
	// 		console.log(res)
	// 	} catch (err) {
	// 		next(false)
	// 	}

	// })
	// 

</script>

<template>
<div class="user-page">
	{{isLogin
		}}
		
	<div class="body">
		<div class="setup">
			<span class="iconfont2 icon-shezhi icon"></span>
			<span class="iconfont2 icon-tongzhi icon"></span>
		</div>
	
	
	
		<div class="head">
			<div class="tag">
				<span class="sign">签到</span>
				<span class="aaa">领积分</span>
			</div>
			<div class="avatar" @click="navTo('/userInfo')">
				<img width="70" height="70" :src="userInfo.avatar" v-if="userInfo.avatar" alt="">
				<div class="iconfont2 icon-morentouxiang" v-else></div>
			</div>
			<div class="name">
				<div class="username" @click="navTo('/userInfo')">
					用户名：<span>{{userInfo.nickname}}</span>
				</div>
				<div class="vip">
					<span class="member">普通会员</span>
					<span class="copartner">成为合伙人</span>
				</div>
			</div>
		</div>
		
		

		<div class="list">
			<div class="purse" @click="navTo('/purse')">
				<li class="num" style="color: #dc5e54;">0.00</li>
				<li class="txt">钱包</li>
			</div>
			<van-divider vertical class="van-divider" />
			<div class="integral">
				<li class="num">115</li>
				<li class="txt">积分</li>
			</div>
			<van-divider vertical class="van-divider" />
			<div class="coupons">
				<li class="num">5</li>
				<li class="txt">优惠卷</li>
			</div>
		</div>
	
	</div>
	<div class="box"></div>
	
	
				<button @click="navTo('/login')">去登录</button>
				<button @click="logout">退出</button>
	<div class="user-center">
		<div class="center">
			<li>
				<span class="iconfont2 icon-daifukuan"></span>
				<span class="cen">待付款</span>
			</li>
			<li>
				<span class="iconfont2 icon-daishouhuo"></span>
				<span class="cen">待收货</span>
			</li>
			<li>
				<span class="iconfont2 icon-icon-test"></span>
				<span class="cen">待评价</span>
			</li>
			<li>
				<span class="iconfont2 icon-tuikuan"></span>
				<span class="cen">退款</span>
			</li>
			<li>
				<span class="iconfont2 icon-wodedingdan0101"></span>
				<span class="cen">我的订单</span>
			</li>
		</div>
	</div>
	<div class="box"></div>
	<div class="quick-access">
		<div class="access">
			<li>
				<span class="iconfont2 icon-daohangdizhi" style="color: #3ddaae; font-size: 24px;"></span>
				<span>地址管理</span>
			</li>
			<li>
				<span class="iconfont2 icon-yaoqing" style="color: #9382ec; font-size: 25px;"></span>
				<span>邀请好友</span>
			</li>
			<li>
				<span class="iconfont2 icon-wodeshoucang" style="color: #fa5c78; font-size: 25px;"></span>
				<span>我的收藏</span>
			</li>
			<li>
				<span class="iconfont2 icon-01_shangjiaruzhuguanli" style="color: #6b91fc; font-size: 25px;"></span>
				<span>商家入驻</span>
			</li>
		</div>
	</div>
	<div class="box"></div>
	<div class="recording">
		<div class="recording-header">
			<span class="line"></span>
			<span style="font-size: 20px; margin- left: 10px;">浏览记录</span>
		</div>
	</div>
	<div class="help-center">
		<ul>
			<li>
				<span>我的会员</span>
				<span class="iconfont2 icon-youfanhui"></span>
			</li>
			<li>
				<span>意见反馈</span>
				<span class="iconfont2 icon-youfanhui"></span>
			</li>
			<li>
				<span>联系客服</span>
				<span>400-000-000</span>
			</li>
			<li>
				<span>常见问题</span>
				<span class="iconfont2 icon-youfanhui"></span>
			</li>
		</ul>
	</div>
	
</div>


</template>

<style scoped lang="scss">
	$a:10px;
	.user-page{
		
		.body{
			margin-left: 10px;
			margin-right: 10px;
		}
		.help-center ul li .icon-youfanhui {
			font-size: 11px;
		}
		
		.help-center ul li {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		
		
		.help-center ul {
			list-style-type: none;
			padding: 0;
			margin: 0;
		}
		
		.help-center li {
			padding: 10px;
			border-bottom: 1px solid #e0e0e0;
			cursor: pointer;
			transition: background-color 0.3s;
		}
		
		.help-center li:hover {
			background-color: #f0f0f0;
		}
		
		.help-center li:last-child {
			border-bottom: none;
		}
		
		.recording-header {
			display: flex;
			height: 50px;
			align-items: center;
		}
		
		.recording .recording-header .line {
			width: 5px;
			height: 30px;
			background-color: #ff4f37;
			border-radius: 5px;
			margin: 5px;
		}
		
		.quick-access .access {
			display: flex;
			justify-content: space-evenly;
		}
		
		.quick-access .access li {
			list-style: none;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
		
		.quick-access .access {
			width: 100%;
			height: 80px;
		}
		
		
		
		.user-center .center li .iconfont2 {
			font-size: 20px;
			background: linear-gradient(to right, #f88727, #f85e3b);
			/* 渐变颜色 */
			-webkit-background-clip: text;
			/* 背景裁剪为文本 */
			-webkit-text-fill-color: transparent;
			/* 填充颜色透明 */
			display: inline-block;
			/* 使背景裁剪属性生效 */
		}
		
		.user-center .center li .cen {
			font-size: 15px;
		}
		
		.user-center .center li {
			list-style: none;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
		}
		
		.user-center .center {
			display: flex;
			justify-content: space-evenly;
		}
		
		.user-center .center {
			width: 100%;
			height: 70px;
		}
		.box {
				width: 100%;
				height: 10px;
				background-color: #f7f7f7;
			}
			
			.van-divider {
				height: 30px;
				background-color: #ccc;
			}
			
			.num {
				font-size: 15px;
			}
			
			 .txt {
				font-size: 10px;
			}
			
		.list li {
				list-style: none;
			}
			
			 .list {
				height: 30px;
				margin-top: 20px;
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-bottom: 20px;
			}
			
		.list div {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
			
		.sign {
				font-size: 15px;
				color: #ee6160;
			}
			
			.aaa {
				font-size: 10px;
			}
			
		.tag {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100px;
				height: 30px;
				border-radius: 100px;
				background-color: #ffe4e1;
				position: absolute;
				top: 15px;
				right: -27px;
			}
			
			.copartner {
				color: #fc632e;
				font-size: 14px;
			}
			
			.member {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 15px;
				width: 70px;
				height: 25px;
				border: 1px solid #ccc;
				border-radius: 5px;
				color: #ccc;
			}
			
			.vip {
				display: flex;
				justify-content: space-between;
				margin: 5px;
				width: 150px;
				align-items: center;
			}
			
			.username {
				margin: 5px;
			}
			
			.head {
				display: flex;
				align-items: center;
				position: relative;
				margin-top: 10px;
			}
			
			.avatar {
				width: 70px;
				height: 70px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			
			.head .avatar .icon-morentouxiang {
				font-size: 70px;
				color: #d9d9d9;
			}
			.setup {
				display: flex;
				justify-content: space-between;
			}
			
			 .setup .icon {
				font-size: 25px;
			}
		
	}
	

	

</style>